<template>
  <el-dialog
      :before-close="crud.cancelCU"
      :close-on-click-modal="false"
      :title="crud.status.title"
      :visible="crud.status.cu > 0"
      append-to-body
      width="500px"
  >
    <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
        size="small"
    >
      <el-form-item
          label="编码"
          prop="code"
      >
        <el-input
            v-model="form.code"
            style="width: 370px;"
        />
      </el-form-item>
      <el-form-item
          label="名称"
          prop="name"
      >
        <el-input
            v-model="form.name"
            style="width: 370px;"
        />
      </el-form-item>
      <el-form-item
        label="联系电话"
        prop="phone"
      >
        <el-input v-model="form.phone" maxlength="11"  style="width: 370px;" oninput="value=value.replace(/[^\d]/g,'')" show-word-limit/>
      </el-form-item>
      <el-form-item
        label="备注"
        prop="remark"
      >
        <el-input
          v-model="form.remark"
          style="width: 370px;"
        />
      </el-form-item>
      <el-form-item
          label="排序"
          prop="seq"
      >
        <el-input-number
            v-model.number="form.seq"
            :max="999"
            :min="0"
            controls-position="right"
            style="width: 370px;"
        />
      </el-form-item>
      <el-form-item
          v-if="form.pid !== 0"
          label="状态"
          prop="enabled"
      >
        <el-switch
          v-model="form.status === 1"
          :disabled="form.id === 1"
          active-color="#409EFF"
          inactive-color="#F56C6C"
          @change="changeStatus(form, form.status,)"
        />
      </el-form-item>
      <!--      <el-form-item-->
      <!--        label="所属部门"-->
      <!--        prop="dept.id"-->
      <!--        :rules="rules.dept"-->
      <!--      >-->
      <!--        <treeselect-->
      <!--          v-model="form.dept.id"-->
      <!--          :options="depts"-->
      <!--          style="width: 370px"-->
      <!--          placeholder="选择部门"-->
      <!--        />-->
      <!--      </el-form-item>-->
    </el-form>
    <div
        slot="footer"
        class="dialog-footer"
    >
      <el-button
          type="text"
          @click="crud.cancelCU"
      >
        取消
      </el-button>
      <el-button
          :loading="crud.cu === 2"
          type="primary"
          @click="crud.submitCU"
      >
        确认
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import CRUD, {form} from '@crud/crud'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

const defaultForm = {
  id: null,
  name: '',
  sort: 999,
  status: 1,
  code: '',
  // dept: {
  //   id: 1
  // }
}
export default {
  components: {Treeselect},
  mixins: [form(defaultForm)],
  props: {
    jobStatus: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      depts: [],
      rules: {
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '请输入编码', trigger: 'blur'}
        ],
        sort: [
          {required: true, message: '请输入序号', trigger: 'blur', type: 'number'}
        ],
        dept: {required: true, message: '所属部门不能为空', trigger: 'select'}
      },
      jobStatusList: [{value: 'true', label: '正常'},
        {value: 'false', label: '禁用'}]
    }
  },
  methods: {
    [CRUD.HOOK.beforeToCU](crud, form) {
      this.form.status = this.form.status === true ? 1 : 0
    },
    changeStatus(data, val){
      this.form.status = val === 0?1:0
    },
    // 提交前的验证
    [CRUD.HOOK.afterValidateCU](crud, form) {
      this.form.status = this.form.status === true ? 1 : 0
      return true
    }
  }
}
</script>


